<template>
    <div id="main">

        <div id="goodslist">
            <div class="tit" style="height: 50px;padding-bottom: 10px;">商品清单</div>
            <div class="list-tit">
                <ul>
                    <li class="li1">商城发货订单</li>
                    <li class="li3">单价</li>
                    <li class="li4">数量</li>
                    <li class="li5">小计</li>
                </ul>
            </div>
            <div class="list-cont">

                <ul v-for="(item, index) in payInfo" :key="index">
                    <li class="li1">
                        <dl>
                            <a href="detail?id=32">
                                <dt><img :src="$baseUrl + item.cover.slice(2)"></dt>
                                <dd class="goodsname" style="padding-top: 36px;">{{ item.name }}</dd>
                                <dd class="goods-des">{{ item.intro }}</dd>
                            </a>
                        </dl>
                    </li>
                    <li class="li3">￥<span>{{ item.price }}</span></li>
                    <li class="li4">x<span>{{ item.amount }}</span></li>
                    <li class="li5">￥<span>{{ item.amount * item.price }}</span></li>
                </ul>

            </div>
            <p class="zprice" style="text-align: right;">应付总金额：
                <span>￥<span id="shifu" style="font-size: 32px;font-weight: bold;color: #FF712B;">{{ total }}</span></span>
            </p>
        </div>

        <div id="collect">
            <div class="collect-tit"><span class="tit">收货信息</span></div>
            <div class="collect-cont new-address" style="padding: 0px 0px;">
                <form action="orderPay" method="post" id="form">
                    <input type="hidden" name="id" value="11">
                    <input type="hidden" name="paytype">
                    <div class="box clearfix">
                        <div class="left">
                            <span>姓名&nbsp;：&nbsp;</span>
                        </div>
                        <div class="right">
                            <input type="text" id="name" name="name" placeholder="请输入收货人姓名" v-model="name">
                            <span class="Validform_checktip"></span>
                        </div>
                    </div>
                    <div class="box clearfix">
                        <div class="left">
                            <span>电话&nbsp;：&nbsp;</span>
                        </div>
                        <div class="right">
                            <input type="text" id="phone" name="phone" placeholder="请输入收货人电话" v-model="phone">
                            <span class="Validform_checktip"></span>
                        </div>
                    </div>
                    <div class="box clearfix">
                        <div class="left">
                            <span>地址&nbsp;：&nbsp;</span>
                        </div>
                        <div class="right">
                            <input type="text" id="address" name="address" placeholder="请输入收货地址" v-model="address">
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="close-foot clearfix" style="width: 1200px;margin: 30px auto;">
            <div id="payway">
                <div class="payway-tit">支付方式</div>
                <div class="payway-cont">
                    <div class="way" :class="payType == 1 ? 'active' : ''" @click="payType = 1">
                        <i class="iconfont icon-weixin"></i>微信
                        <span class="iconfont icon-xuanzhong3"></span>
                    </div>
                    <div class="way" :class="payType == 2 ? 'active' : ''" @click="payType = 2">
                        <i class="iconfont icon-zhifubao"></i>支付宝
                        <span class="iconfont icon-xuanzhong3"></span>
                    </div>
                    <div class="way" :class="payType == 3 ? 'active' : ''" @click="payType = 3">
                        <i class="iconfont icon-wallet"></i>余额支付
                        <span class="iconfont icon-xuanzhong3"></span>
                    </div>
                </div>
            </div>
            <p class="submit" id="tijiao" @click="pay">立即支付</p>
        </div>

    </div>
</template>

<script>
import { getOrdersByUserId, addOrders } from '@/request/order.js'
export default {
    name: 'EshopFrontPay',
    data() {
        return {
            payType: 1,
            name: '小许',
            phone: '19873751973',
            address: '湖南民族学院东校区',
            payInfo: [],
            total: 0
        };
    },
    mounted() {
        this.payInfo = this.$route.params.payInfo
        this.payInfo.forEach(item => {
            this.total += item.price * item.amount
        })
        console.log(this.$route.params.payInfo);
    },
    methods: {
        pay() {
            let _that = this
            let orders = {}
            console.log(this.payInfo);
            this.payInfo.forEach(item => {
                orders = {
                    payType: 1,
                    name: _that.name,
                    phone: _that.phone,
                    address: _that.address,
                    total: _that.total,
                    goodId: item.goodId,
                    userId: item.userId,
                    status: 2,
                    amount: item.amount
                }
                addOrders(orders).then(res => {
                    this.$message.success('购买完成~')
                })
            })
            this.$router.push('/')


        }
    },
};
</script>

<style scoped>
@import url('@/assets/css/pay.css');
@import url('@/assets/css/address.css');
</style>